<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<title></title>
	<style type="text/css" media="screen">
		p{
			line-height: 35px;
			margin-top: 20px;
		}
	</style>
</head>
<body>
    <p>过滤器是一个通过输入数据，能够及时对数据进行处理并返回一个数据结果的简单函数。</p>
    <p>过滤器通常会使用管道标志 “ | ”</p>
    <p>定义一个全局的自定义过滤器，需要使用Vue.filter()构造器。这个构造器需要两个参数。
		Vue.filter() Constructor Parameters:
		1.filterId: 过滤器ID，用来做为你的过滤器的唯一标识；
		2.filter function: 过滤器函数，用一个function来接收一个参数，之后再将接收到的参数格式化为想要的数据结果。
	</p>
    <p>capitalize:首字母大写</p>
    <p>uppercase:全部大写</p>
    <p>lowercase:全部小写</p>
    <p>
	    currency:输出金钱以及小数点。
	    参数:
		第一个参数     {String} [货币符号] - 默认值: '$'
		第二个参数     {Number} [小数位] - 默认值: 2
    </p>
    <p>
    	filterBy
    	(1)限制:需在v-for(即数组)里面使用
		(2)三个参数:
		第一个参数: {String | Function} 需要搜索的字符串
		第二个参数: in (可选,指定搜寻位置)
		第三个参数: {String} (可选,数组格式)
    </p>
    <p>
    	orderBy
    	(1)限制:需在v-for(即数组)里面使用
		(2)三个参数:
		第一个参数: {String | Array<String> | Function} 需要搜索的字符串
		第二个参数: {String} 可选参数 order 决定结果升序（order >= 0）或降序（order < 0）,默认是升序
    </p>


	<ul class="product">
	    <li v-for="product in products|filterBy '水果' in 'category' |orderBy 'price' 0">
	        {{product.name}}-{{product.price|discount 25 | currency}}
	    </li>
	</ul>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
	/*定义在全局 
	Vue.filter('discount', function(value,discount) {
	    return value  * ( discount / 100 ) ;
	});
	*/
	var product = new Vue({
	    el: '.product',
	    data: {
	        products: [
	            {name: '苹果',price: 25,category: "水果"}, 
	            {name: '香蕉',price: 15,category: "水果"}, 
	            {name: '雪梨',price: 65,category: "水果"}, 
	            {name: '宝马',price: 2500,category: "汽车"},
	            {name: '奔驰',price: 10025,category: "汽车"}, 
	            {name: '柑橘',price: 15,category: "水果"}, 
	            {name: '奥迪',price: 25,category: "汽车"}
	        ]
	    },
	    //自定义在实例
	    filters: {
	        discount: function(value, discount) {
	            return value * (discount / 100);
	        }
	    }
	})
</script>
</html>